{% extends "base.html" %}
{% block body %}
{% import "macros.html" as macros %}
{% import "macros_modal.html" as modal_macros %}

<div class="single-page">
    <div class="single-page-artical">
        <ol class="breadcrumb">
            {% if request.args.source == 'home' %}
                <li><a href="{{ source_dict['url'] }}?query_page={{ pic.id }}">{{ source_dict['name'] }}</a></li>
            {% else %}
                <li><a href="{{ url_for('pic.home') }}?query_page={{ pic.id }}">Home</a></li>
                {% if request.args.source == 'volume' %}
                <li><a href="{{ url_for('pic.one_actress', uid=source_dict.actress_id, all=1) }}">{{ source_dict['actress_name'] }}</a></li>
                {% endif %}
                <li><a href="{{ source_dict['url'] }}?query_page={{ pic.id }}">{{ source_dict['name'] }}</a></li>
            {% endif %}
            <li class="active">{{ pic.id }}</li>
        </ol>

        {%if pic.delete_time%}<div class="alert alert-danger">图片已处于回收站中，删除时间:{{pic.delete_time}}</div>{%endif%}

        <div class="artical-content" style="display:flex;justify-content:center;">
            <a href="{{pic.uri}}" target="_blank">{{ pic.img | safe }}</a>
        </div>

        <div class="picture-basic-info">
            <div class="row">
                <center>
                    {{ macros.rating(pic) }}
                    <ul class="pager archive-link" id="page_switch">
                        <li class="disabled" id="context_prev"><a>Prev</a></li>
                        <li class="disabled" id="context_next"><a>Next</a></li>
                    </ul>
                </center>
            </div>

            <div class="row">
                <i class="fa fa-pencil-square-o"></i> <span id="pic-note" class="album_pic_note" data-id="{{pic.id}}">{{pic.note | default('',true)}}</span>
            </div>

            <div class="row">
                <p>
                    <span id="pic_actresses">{{pic.actresses_html(blank=True) | safe}}</span> <input type="button" class="btn btn-xs btn-default" data-toggle="modal" data-target="#pic_modal" value=" + " onclick=collapse_div('actress_div')>
                </p>
                <p>
                    <span id="pic_volumes">{{pic.volumes_html(blank=True) | safe}}</span> <input type="button" class="btn btn-xs btn-default" data-toggle="modal" data-target="#pic_modal" value=" + " onclick=collapse_div('volume_div')>
                </p>
                <p>
                    <span id="pic_albums">{{pic.albums_html(blank=True) | safe }}</span> <input type="button" class="btn btn-xs btn-default" data-toggle="modal" data-target="#pic_modal" value=" + " onclick=collapse_div('album_div')>
                </p>
                <p>
                    <span id="pic_tags">{{pic.tags_html(blank=True) | safe }}</span> <input type="button" class="btn btn-xs btn-default" data-toggle="modal" data-target="#pic_modal" value=" + " onclick=collapse_div('tag_div')>
                </p>
            </div>

            <div class="row">
                <i class="fa fa-info-circle"></i>
                    分辨率:{{pic.resolution_hr()}},
                    文件大小: {{pic.file_size_hr()}},
                    导入时间: {{pic.create_time}},
                    查看次数: {{pic.pv}}
            </div>

        </div>

        <div class="picturl-action">
            <div class="row form-group">
                <input type="button" class="btn btn-sm btn-info" value="旋转" onclick="onRotatePic('{{pic.id}}');">
                <input type="button" class="btn btn-sm btn-info" value="水平翻转" onclick="onScaleXPic('{{pic.id}}');">
                <input type="button" class="btn btn-sm btn-danger pull-right" value="删除" onclick="onDelete_dbRecord('{{pic.id}}');">
            </div>
        </div>

    </div>

    <!---//End-comments-section--->

    {{ modal_macros.picture_modal(siteinfo,pic) }}
</div>
{% endblock %}

{% block script %}
<script type="text/javascript">
let pic_albums = {{pic.albums_id}},
    pic_tags = {{pic.tags_id}},
    pic_actresses = {{pic.actresses_id}},
    pic_volumes = {{pic.volumes_id}};
js_pic = {
        "note_edit_url": "{{url_for('api.note')}}",
        "pic_id": "{{pic.id}}",
        "note": "{{pic.note}}",
        "delete_api_url": "{{url_for('api.delete',label='pic')}}",
        "rotate_pic_api_url": "{{ url_for('api.pic_rotate') }}",
        "scalex_pic_api_url": "{{ url_for('api.pic_scalex') }}",
        "album_tag_update_url": "{{url_for('api.pic_album_tag_update')}}",
        "rating_url": "{{url_for('api.rate')}}",
        "all_categories_url": "{{url_for('api.all_categories', timestamp=siteinfo.cache_refresh_time('album'))}}",
        };

$(document).ready(function () {
    $.get("{{ url_for('api.pic_context',pic_id=pic.id) }}&{{ request.query_string.decode('utf-8')| safe }}", function (r) {
        if (r["prev_url"]){
            $("#context_prev").removeClass("disabled");
            $("#context_prev a").attr("href", r.prev_url);
        }
        if(r["next_url"]){
            $("#context_next").removeClass("disabled");
            $("#context_next a").attr("href", r.next_url);
        }
    });
});

let note_area = document.getElementById('pic-note');
note_area.addEventListener('dblclick', noteDblClick);

document.addEventListener("keydown", function(event) {
    const tag = event.target.tagName.toLowerCase();
    if (tag === "input" || tag === "textarea" || event.target.isContentEditable) return;

    let url = "";
    if(event.key === "ArrowLeft"){url=$("#context_prev a").attr("href")}
    else if(event.key === "ArrowRight"){url=$("#context_next a").attr("href")}
    if (!url) return;
    window.location.href = url;
})

</script>
{% endblock %}